@import '../../../../styles/common';
@import '../../variables';

$bulk-actions-button-stacking-order: (
  focused: 20,
);
$bulk-actions-offset-slide-in-start: rem(-40px);

.Button {
  @include text-style-button;
  @include button-base;

  &:not(:first-child) {
    margin-left: -1px;
  }

  .Group-measuring & {
    font-size: font-size(button);
  }

  .disabled & {
    @include base-button-disabled;
  }
}

.Group {
  @include text-style-input;
  width: 100%;
  will-change: opacity, display;
  transition: opacity easing() duration();
  display: none;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0;

  &.Group-measuring {
    transition: none;
    display: flex;
    opacity: 0;
  }
}

.Group-entering,
.Group-exiting {
  opacity: 0;
  display: flex;
}

.Group-entered {
  opacity: 1;
  display: flex;
}

.Group-exited {
  opacity: 0;
  display: none;
}

.Group-smallScreen {
  @include breakpoint-after(resource-list(breakpoint-small)) {
    display: none;
  }
}

.Group-largeScreen {
  display: none;

  @include breakpoint-after(resource-list(breakpoint-small)) {
    display: flex;

    &.Group-exiting {
      transition: none;
    }

    &.Group-exited {
      opacity: 0;
      display: none;
    }
  }
}

.ButtonGroup {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: flex-end;
  box-shadow: inset 0 0 0 1px color('sky', 'dark');
  border-radius: border-radius();

  @include breakpoint-after(resource-list(breakpoint-small)) {
    width: auto;
    justify-content: flex-start;
    margin-right: spacing(tight);
  }

  .Group-measuring & {
    position: absolute;
    width: auto;
  }

  .Button {
    border-radius: 0;
    white-space: nowrap;

    &:focus {
      z-index: z-index(focused, $bulk-actions-button-stacking-order);
    }

    // stylelint-disable-next-line selector-max-specificity
    &:last-child:not(:first-child) {
      border-radius: 0 border-radius() border-radius() 0;
    }
  }

  .Button-cancel {
    z-index: 0;
    flex: 0 0 auto;
    margin-left: -1px;
    border-radius: 0 border-radius() border-radius() 0;

    &:focus {
      z-index: 1;
    }
  }
}

.CheckableContainer {
  flex: 1 1 0;
}

.Popover {
  max-height: resource-list(button-min-height);
  margin-left: -1px;

  &:last-child * {
    border-radius: 0 border-radius() border-radius() 0;
  }
}

.ActionContent {
  display: flex;
  align-items: center;
}

.ActionIcon {
  @include recolor-icon(color('ink', 'lighter'));
  display: inline-block;

  &:first-child {
    margin-right: spacing(extra-tight);
  }

  &:last-child {
    // This compensates for the disclosure icon, which is substantially
    // inset within the viewbox (and makes it look like there is too much
    // spacing on the right of the button)
    margin-right: -1 * spacing(tight);
  }

  &.disabled {
    @include recolor-icon(color('ink', 'lightest'));
  }
}

.disabled {
  @include base-button-disabled;
  cursor: default;
  pointer-events: none;
}

.PaginatedSelectAll {
  padding: spacing(extra-tight) 0;
}

.Slide {
  will-change: transform;
  transform: translateY(0);
  transition: transform easing() duration();
}

.Slide-appear,
.Slide-enter,
.Slide-exit {
  transform: translateX($bulk-actions-offset-slide-in-start);
}

.Slide-appearing,
.Slide-entering {
  transform: translateY(0);
}
